<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>网格布局</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /*grid布局是将父元素划分成一个个小格子，然后将小格子合并达到效果*/
        /* dispaly设置：grid默认独占一行 ,inline-grid与行内块类似*/
        .outer {
            width: 400px;
            height: 500px;
            background-color: gray;
            border: 10px solid black;
            /*改成inline-grid后,outer相当于就成了个inline-block的grid */
            display: inline-grid;
            /*grid-template-rows,grid-template-columns划分行和列 ,后面的值就代表了几行(每行高度)几列(每列宽度)*/
            /*下面代码表示划分成了3行3列的网格，每一行高100px,每一列宽100px*/
            /* grid-template-rows: 100px 100px 100px;
            grid-template-columns: 100px 100px 100px; */

            /*也可以使用百分比布局*/
            /* grid-template-rows: 30% 40% 30%;
            grid-template-columns: 30% 40% 30%; */

            /* 使用重复函数,如果100行100列那么需要手写100个值，这是不现实的 */
            /* repeat(num1,num2) num1重复的次数，num2重复的数值 */
            /*前面两个元素会被压缩，最后一个有空间不会*/
            /* grid-template-rows: repeat(3,100px);
            grid-template-columns: repeat(auto-fill,20%); */

            /*自动填充 repeat(auto-fill,30%),这样剩下10%不会划分,改成20%就刚好5列*/
            /* grid-template-rows: repeat(3,100px);
            grid-template-columns: repeat(auto-fill,27%); */

            /*auto值，表示占剩下的所有*/
            /*第一行高100，第三行高100，剩下的全是第二行的，第二列宽100，第三列宽100，剩下的全是第一列的*/
            /* grid-template-rows: 100px auto 100px;
            grid-template-columns: auto 100px 100px; */

            /*网格布局有片段，关键字fr,可以方便的表示比例,如列宽1fr,2fr后者是前者的两倍*/
            /* grid-template-rows: 1fr 2fr 3fr;
            grid-template-columns: auto 100px 100px; */

            /* minmax(min,max),max表示最大值，如果条件允许则最大值，不允许则介于最大值最小值之间 */
            /* 如果不足以现实距离，则使用最小值(哪怕超出元素大小),也就是说不足时可能会撑出去*/
            grid-template-rows: 100px 100px 100px;
            grid-template-columns: 100px 100px 100px;

            /* 间距调整,row-gap,column-gap,直接用gap表示行间距和列间距 */
            /* row-gap: 25px;
            column-gap: 25px; */
            /* 等价 row-gap: 25px;column-gap: 25px; */
            /* gap: 25px 25px; */

            /* 项目无宽高会默认自动撑开，先排第一行，再排第二行...依次 */
            /* grid-auto-flow row横向显示项目(默认),column纵向显示项目 */
            grid-auto-flow: column;

            /* 对齐方式,调整的是表格单元格里面元素的对齐方式 */
            /* 对齐方式,使用对齐后，里面div要设置宽高，因为默认是拉伸scretch */
            /* 水平justify-items */
            /* start 默认,center水平,end结束位置*/
            /* justify-items: end; */
            /* 侧轴align-items */
            /* align-items:end ; */

            /* 相当于justify-items和align-items的复合,第一个是垂直，第二个是水平,end start项目就在左下角 */
            place-items: end start;

            /* 调整单元格对于容器的对齐方式 */
            /* justify-content 水平，align-content 垂直，一样是start,end,center*/
            /* 默认scretch,还有额外属性 space-around,space-between,space-evenly 和flex一样*/
            /* 下面的话，单元格就居中了*/
            /* justify-content: center;
            align-content: center; */
            /* 复合属性，同理,网格垂直贴下，水平居中 */
            place-content: space-evenly center;




        }

        .inner {
            width: 50px;
            height: 50px;
            border: 2px dashed orange;
        }

        .inner1 {
            background-color: red;
        }

        .inner2 {
            background-color: green;
        }

        .inner3 {
            background-color: blue;
        }

        .inner4 {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <img src="./images/1网格布局.png" style="width: 450px">
        <img src="./images/2网格布局基础.png" style="width: 450px">
        <img src="./images/3单元格与网格线数量.png" style="width: 450px">
    </div>


    <span>我是一个span</span>
    <div class="outer">
        <div class="inner inner1">1</div>
        <div class="inner inner2">2</div>
        <div class="inner inner3">3</div>
        <div class="inner inner4">4</div>
    </div>
    <span>我是一个span</span>

</body>

</html>